<template>
  <div class="page-albumList">
    <a-button type="primary" class="mb-[16px]" @click="multipleDelete(3)">删除</a-button>
    <a-table
      id="albumTable"
      :row-selection="{ selectedRowKeys: statusState.selectedRowKeys, checkStrictly: false, onChange: onSelectChange }"
      :expandRowByClick="false"
      row-key="id"
      :columns="columns"
      :pagination="false"
      :data-source="state.recycleList"
      :loading="state.loading"
      :scroll="{ x: 1500 }"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'sort'">
          <menu-outlined />
        </template>
        <template v-if="column.key === 'name'">
          <a-tooltip placement="top" color="#fff">
            <template #title>
              {{ record.name }}
            </template>
            <div class="ellipsis-text">{{ record.name }}</div>
          </a-tooltip>
        </template>
        <template v-else-if="column.key === 'table_num'">
          <span>
            {{ formatNumber(record.table_num) }}
          </span>
        </template>
        <template v-else-if="column.key === 'data_size'">
          <span>
            {{ unitConversion(record.data_size) }}
          </span>
        </template>
        <template v-else-if="column.key === 'album_popularity'">
          <span> {{ formatNumber(+record.album_popularity) }} </span>
        </template>
        <template v-else-if="column.key === 'created_at'">
          <span>
            {{ formatToDateTime(record.created_at * 1000) }}
          </span>
        </template>
        <template v-else-if="column.key === 'status'">
          <span slot="reference" v-if="record.status == 1" class="flex items-center">
            <i class="dotClass mr-[8px]" style="background-color: #03b861"></i><span>已恢复</span>
          </span>
          <span slot="reference" v-if="record.status == 2" class="flex items-center">
            <i class="dotClass mr-[8px]" style="background-color: #bfbfbf"></i><span>未恢复</span>
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a class="basicColor" @click="recycleData(record, 1, index)">立即恢复</a>
            <a-divider type="vertical" />
            <a class="basicColor" @click="deleteData(record, 2)"> 删除 </a>
          </span>
        </template>
      </template>
    </a-table>
    <a-pagination
      @change="handlePaginationChange"
      show-size-changer
      :defaultPageSize="10"
      :pageSizeOptions="['10', '20', '50', '100']"
      :show-total="(total:number)=>`共${total}条`"
      :total="queryState.total"
    />
    <!-- 数据操作对话框 -->
    <modal-view
      title="提示"
      v-model:visible="dataVisible"
      okText="确定"
      cancelText="取消"
      :width="458"
      @confirm="dataConfirm"
      @cancel="dataCancel"
    >
      <span v-if="isDelete === 2 || isDelete === 3">确定要删除该备份吗</span>
      <span v-else>确定要恢复该备份吗</span>
    </modal-view>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { formatNumber, formatToDateTime } from '@/utils/format'
import { unitConversion } from '@/utils/unitConversion'
import { column } from './dataSource'
import type { RecycleItem } from '@/types/backups/backups'
import { statusState } from './state'
import ModalView from '@/components/components/modal/ModalView.vue'
import apis from '@/apis'
const {
  backups: { recycle_list, recycle_delete, recycle_restore, recycle_batchDelete }
} = apis
type Key = string
const deleteId = ref('') //删除备份id
const recycleId = ref('') //恢复id
const columns = ref(column)
const dataVisible = ref(false)
const isDelete = ref(0)
const currentIndex = ref()
const state = reactive<{ loading: boolean; recycleList: RecycleItem[] }>({
  loading: false,
  recycleList: [] as RecycleItem[]
})
const queryState = reactive({
  offset: 0, // 默认当前页数
  limit: 10, // 默认当前页显示数据的大小
  total: 0 // 总数，必须先有
})
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number) => {
  queryState.limit = limit
  queryState.offset = (size - 1) * limit
  getRecycleList()
}
//获取数据恢复接口
const getRecycleList = () => {
  state.loading = true
  recycle_list(queryState)
    .then((res: any) => {
      res?.list.forEach((item: RecycleItem) => {
        item.status = 2
      })
      state.recycleList = res?.list
      queryState.total = res?.total
      state.loading = false
      console.log('数据恢复列表: ', state.recycleList)
    })
    .catch(() => {
      state.loading = false
    })
}
const onSelectChange = (rowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', rowKeys)
  statusState.selectedRowKeys = rowKeys
}
//批量删除
const multipleDelete = (type: number) => {
  if (statusState.selectedRowKeys.length <= 0) return message.warning('请选择至少一条数据进行删除')
  isDelete.value = type
  dataVisible.value = true
}
//立即恢复
const recycleData = (item: RecycleItem, type: number, index: number) => {
  isDelete.value = type
  recycleId.value = item.id
  dataVisible.value = true
  currentIndex.value = index
}
//删除
const deleteData = (item: RecycleItem, type: number) => {
  dataVisible.value = true
  isDelete.value = type
  deleteId.value = item.id
}
/**
  删除分类对话框事件
 */
const dataConfirm = (value: any) => {
  console.log('value: ', value)
  if (isDelete.value === 1) {
    recycle_restore({ id: recycleId.value }).then((res) => {
      message.success('恢复备份成功')
      dataVisible.value = value
      state.recycleList[currentIndex.value].status = 1
    })
  } else if (isDelete.value === 2) {
    recycle_delete({ id: deleteId.value }).then(() => {
      message.success('删除备份成功')
      dataVisible.value = value
      getRecycleList()
    })
  } else {
    recycle_batchDelete({ ids: statusState.selectedRowKeys }).then(() => {
      message.success('批量删除备份成功')
      dataVisible.value = value
      getRecycleList()
    })
  }
}
const dataCancel = () => {
  dataVisible.value = false
}
onMounted(() => {
  getRecycleList()
})
</script>
<style lang="less" scoped>
@basicColor: #0083ff;
.dotClass {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  margin-left: 10px; //这个用于圆点居中
}
:deep(.ant-form-item-label) {
  width: 80px;
  text-align: right;
}

:deep(.ant-form-item-label > label::after) {
  content: '';
}

.page-albumList {
  padding-top: 6px;
  box-sizing: border-box;
  .ant-btn {
    background: #fff2f5;
    border: 1px solid rgba(254, 76, 77, 1);
    color: #fe4c4d;
  }
  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }

  :deep(
      .ant-table-thead
        > tr
        > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
          [colspan]
        )::before
    ) {
    width: 0;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }

  :deep(.ellipsis-text) {
    max-width: 154px !important;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
